<style lang="stylus">
body
  app-region no-drag
</style>

<style lang="stylus" scoped>
a
  display flex
  flex-direction column
  flex 1
  margin 0
  justify-content center
  align-items center
  background-color rgba(0, 0, 0, 0.8)
  border-radius 120px
  color #fff
  cursor pointer
  border 2px solid rgba(255, 255, 255, 0.2)

  b
    font-size 144px
    line-height @font-size

  s, b
    margin-bottom 9px

  s
    display none
    height 144px
    width 80px
    background url('!/svg/pause.svg') 50% 50% / contain no-repeat

  &.pause
    color #999

    s
      display flex

    b
      display none

  i
    font-size 18px
    font-style normal
    line-height @font-size
</style>

<template lang="pug">
a(:class="{ pause }" @click="stop")
  s
  b {{ n }}
  i 点此取消
</template>

<script lang="coffee">

import ipc from '~/lib/ipc.coffee'
import broadcast from '~/lib/broadcast.coffee'
import ON from '~/lib/broadcast/on.coffee'
import hide from '~/lib/hide.coffee'

{count_down,recbar} = ipc

export default {
setup:=>
  n = shallowRef 3
  pause = shallowRef false
  onMounted =>
    timer = undefined
    run = =>
      timer = setInterval(
        =>
          v = n.value - 1
          if v == 0
            await hide(count_down)
            broadcast.start()
            count_down.close()
            return
          else
            n.value = v
          return
        1000
      )
      return
    run()
    ON.pause = (p)=>
      pause.value = p
      if p
        clearInterval timer
        timer = undefined
      else if not timer
        run()
      return
  return {
    n
    pause
    stop: recbar.cancel
  }
}
</script>
